import { Canvas, Controls, Meta, Source } from '@storybook/blocks'

import { RadixPrimitiveDocsButton } from '../../storybook-utils/primitive-docs-button'
import * as ToggleStories from './toggle.stories'

<Meta of={ToggleStories} />

<RadixPrimitiveDocsButton name='toggle' />

# Toggle

A two-state button that can be either on or off.

## Preview

<Canvas of={ToggleStories.Default} />

<Controls />

## Usage

export const importCode = `import { Toggle } from "@orbitkit/ui/toggle";`

export const usageCode = `<Toggle>Toggle</Toggle>`

<Source code={importCode} language='ts' dark />
<Source code={usageCode} language='tsx' dark />

## Examples

### Default

<Canvas of={ToggleStories.Default} />

### Outline

<Canvas of={ToggleStories.Outline} />

### With Text

<Canvas of={ToggleStories.WithText} />

### Small

<Canvas of={ToggleStories.Small} />

### Large

<Canvas of={ToggleStories.Large} />

### Disabled

<Canvas of={ToggleStories.Disabled} />
